<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="/h-ui/css/H-ui.css" />
    <link rel="stylesheet" type="text/css" href="/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="/h-ui.admin/css/style.css" />

</head>
<body>
<div class="panel panel-default">
    <div class="panel-body">

        <div id="tab-system" class="HuiTab">
            <div class="tabBar cl">
                <span>基本设置</span>
                <span>图标看板</span>
            </div>
            <div class="tabCon">
                <form action="" method="post" class="form form-horizontal responsive" id="demoform">
                    <div class="row cl">
                        <span class="c-red">*</span>
                        <label class="form-label col-xs-3">用户昵称：</label>
                        <div class="formControls col-xs-8">
                            <input type="text" class="input-text" placeholder="2~16个字符，字母/中文/数字/下划线" name="nickname" id="nickname">
                        </div>
                    </div>

                    <div class="row cl">
                        <label class="form-label col-xs-3">用户外键：</label>
                        <div class="formControls col-xs-8">
                            <input type="text" value="${userInfo.userId}"  readonly="readonly" class="input-text disabled" placeholder="" name="userId" id="userId">
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-3">用户登录名：</label>
                        <div class="formControls col-xs-8">
                            <input type="text" value="${userInfo.loginName}"  readonly="readonly" class="input-text disabled" placeholder="" name="username" id="username">
                        </div>
                    </div>
                    <div class="row cl">
                        <span class="c-red">*</span>
                        <label class="form-label col-xs-3">用户邮箱：</label>
                        <div class="formControls col-xs-8">
                            <input type="text"  class="input-text" placeholder="@" name="email" id="email" autocomplete="off">
                        </div>
                    </div>

                    <div class="row cl">
                        <label class="form-label col-xs-3">用户密码：</label>
                        <div class="formControls col-xs-8">
                            <input type="text"  class="input-text" placeholder="2~16个字符，字母/中文/数字/下划线" name="password" id="password">
                        </div>
                    </div>

                    <div class="row cl">
                        <label class="form-label col-xs-3">密码验证：</label>
                        <div class="formControls col-xs-8">
                            <input type="text" class="input-text" autocomplete="off" placeholder="密码" name="password2" id="password2">
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-3">开发路径：</label>
                        <div class="formControls col-xs-8">
                            <input type="text"  placeholder="维护本地开发IDE的JAVA文件的路径" class="input-text" placeholder="" name="develop" id="develop">
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-3">FTL路径：</label>
                        <div class="formControls col-xs-8">
                            <input type="text"   placeholder="维护本地开发IDE的FTL模板的路径" class="input-text" placeholder="" name="ftl" id="ftl">
                        </div>
                    </div>

                    <div class="row cl">
                        <label class="form-label col-xs-3">用户快捷：</label>
                        <div class="formControls skin-minimal col-xs-5">
                            <#list shortInfo as menu>
                                <div class="check-box">
                                    <input type="checkbox" <#if menu.check == "checked">checked="checked"</#if> id="${menu.checkBoxName}" name="${menu.checkBoxName}">
                                    <label for="checkbox-5">${menu.menuName}</label>
                                </div>
                            </#list>
                        </div>
                    </div>
                    <div class="row cl">
                        <div class="col-xs-8 col-xs-offset-3">
                            <input class="btn btn-primary" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                        </div>
                    </div>
                </form>
            </div>
            <div class="tabCon" >
                <div class="container select-box-container">
                    <div class="toggle-all-container">
                        <a href="javascript:;" class="btn btn-md btn-default toggle-all-btn" id="save">保存</a>
                    </div>
                    <div class="fileDiv select-item " id="id-1"style="background-image:url('/echarts/id-1.png')"></div>
                    <div class="fileDiv select-item" id="id-2" style="background-image:url('/echarts/id-2.png')"></div>
                    <div class="fileDiv select-item" id="id-3" style="background-image:url('/echarts/id-3.png')"></div>
                    <div class="fileDiv select-item" id="id-4" style="background-image:url('/echarts/id-4.png')"></div>
                    <div class="fileDiv select-item" id="id-5" ></div>
                    <div class="fileDiv select-item" id="id-6" ></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/lib/layer/2.4/layer.js"></script>
<#--<script type="text/javascript" src="/h-ui/js/H-ui.min.js"></script>-->
<#--<script type="text/javascript" src="/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去&ndash;&gt;-->
<script type="text/javascript" src="/h-ui/js/H-ui.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/lib/jquery.validation/1.14.0/messages_zh.js"></script>


<script>
    //弹窗
    $(function(){
        //邮箱提示
        $("#email").emailsuggest();
        //checkbox 美化
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });
        $("#demoform").validate({
            rules:{
                email:{
                    required:true,
                    email:true,
                },
                nickname:{
                    required:true,
                    minlength:2,
                    maxlength:6
                },
                password:{
                    required:false,
                },
                password2:{
                    required:false,
                    equalTo: "#password"
                }
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){
                $.ajax({
                    url : '/localUserInfo-ins-upd-del/',
                    async : false,
                    data :$(form).serialize(),
                    success : function(value){
                        layer.msg('个人信息配置完成')
                    }
                });
            }
        });
        var _bodyHeight = $(window).height();
        $(".containBox").height(_bodyHeight);
        $("#tab-system").Huitab({
            index:0
        });
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->

<style>
    .container {
        padding: 0;
        text-align: center;
    }
    .select-box-container {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .select-box-container .toggle-all-container {
        margin-bottom: 0px;
    }
    .select-item {
        display: inline-block;
        width: 30%;
        height: 200px;
        text-align: center;
        line-height: 100px;
        font-size: 12px;
        border: 1px solid #ccc;
        margin:1%
        cursor: pointer;
    }
    .select-item.selected,
    .select-item.temp-selected {
        background-color: #ddd;
    }
</style>
<script>
    var initSelectBox = function(selector, selectCallback) {
        $(selector).on('click', '.select-item', function() {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
                console.log($(this).attr('id'));
                if($(this).attr('id')=='id-1'){
                    $(this).css("background-image","url('/echarts/id-1.png')");
                }else if($(this).attr('id')=='id-2'){
                    $(this).css("background-image","url('/echarts/id-2.png')");
                }else if($(this).attr('id')=='id-3'){
                    $(this).css("background-image","url('/echarts/id-3.png')");
                }else if($(this).attr('id')=='id-4'){
                    $(this).css("background-image","url('/echarts/id-4.png')");
                }
            } else {
                $(this).addClass('selected');
                if($(this).attr('id')=='id-1'){
                    $(this).css("background-image","url('/echarts/id-1-selected.png')");
                }else if($(this).attr('id')=='id-2'){
                    $(this).css("background-image","url('/echarts/id-2-selected.png')");
                }else if($(this).attr('id')=='id-3'){
                    $(this).css("background-image","url('/echarts/id-3-selected.png')");
                }else if($(this).attr('id')=='id-4'){
                    $(this).css("background-image","url('/echarts/id-4-selected.png')");
                }
            }
        })
    };
    initSelectBox('.container');
</script>
<script type="text/javascript">
    $('#save').click(function(){
        var ids = new Array();
        $(".container").find(".fileDiv").each(function(){
            if($(this).hasClass('selected')){
                ids.push($(this).attr('id'));
            }
        });
        $.ajax({
            url : '/localUserInfo-chart-flag',
            async :false,
            data : {"ids":ids.join('&')},
            type : 'post',
            beforeSend: function(){
                layer.msg("保存中")
            },
            success :function(data){
                if(data=="success"){
                    layer.confirm('配置完成信息需要重新登录', {
                        btn: ['重新登录'] //按钮
                    }, function(){
                        parent.location.href = "/logout_tologout";
                    });
                }else if(data=='noInfo'){
                    layer.msg("请先设置基本信息");
                }else{
                    layer.msg("保存错误")
                }
            }
        })
    })
</script>

</body>
</html>
